<template>
  <div class="flyparameter-app-info">
    <el-tabs v-model="tab" @tab-click="handleTabClick">
      <el-tab-pane :label="$t('flyparam.profile')" name="profile">
        <el-descriptions :title="$t('common.info')" direction="vertical" :column="2" border style="margin: 15px 0px">
          <template #extra>
            <el-button v-permission="{permission: [PERMISSIONS.DESIGN] }" type="primary" class="p-1.5 align-middle mr-2" @click="() => editProfile = true">
              <i class="el-icon-edit" />
            </el-button>
          </template>
          <el-descriptions-item :label="$t('flyparam.template_mode')">
            <el-tag size="small">{{ modeFilter(info.mode) }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item :label="$t('flyparam.cfg_format')">
            <el-tag size="small">{{ fileFilter(info.fileType) }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item :label="$t('common.create_time')">{{ dateTimeFilter( info.creTime ) }}</el-descriptions-item>
          <el-descriptions-item :label="$t('flyparam.last_modify_time')">{{ dateTimeFilter( info.updTime ) }}</el-descriptions-item>
          <el-descriptions-item :label="$t('flyparam.param_num')" :span="2">{{ info.paramCount }}</el-descriptions-item>
        </el-descriptions>

        <el-descriptions title="" direction="vertical" :column="2" border class="profile-description">
          <el-descriptions-item :label="$t('common.description')" :span="2">
            <p>{{ info.description }}</p>
          </el-descriptions-item>
        </el-descriptions>
        <statistics-tab ref="statisticsTab" :template-id="info.id" :tab="tab" />
      </el-tab-pane>
      <el-tab-pane v-if="hasPermission([PERMISSIONS.VIEW, PERMISSIONS.CONFIGURATION])" :label="$t('flyparam.terminal')" name="terminal">
        <terminal-tab :entry-id="info.entryId" :table-id="info.id" :info="info" />
      </el-tab-pane>
      <!-- <el-tab-pane :label="$t('flyparam.statistics')" name="statistics">
        <statistics-tab :template-id="info.id" :tab="tab" />
      </el-tab-pane> -->
    </el-tabs>
    <edit-profile v-model="editProfile" :info="info" :has-data="hasData" v-on="$listeners" />
  </div>
</template>

<script>
import EditProfile from './components/edit-profile.vue'
import TerminalTab from './components/flyparamter-terminal.vue'
import StatisticsTab from './components/statistics-tab'
import { dateTimeFilter } from '@/filters'
import { PERMISSIONS } from '@/components/common/const'
import { hasPermission } from '@/utils/auth'

export default {
  components: {
    StatisticsTab,
    EditProfile,
    TerminalTab
  },
  props: {
    info: {
      type: Object
    }
  },
  inject: ['devCount'],

  data() {
    return {
      PERMISSIONS: { ...Object.freeze(PERMISSIONS.FLY_PARAM) },
      editProfile: false,
      terminalRadio: '1',
      tab: 'profile',
      tableData: [],
      hasData: false
    }
  },
  created() {
    // this._provided.eventBus = new Vue()
    // this.eventBus = this._provided.eventBus
  },
  mounted() {
  },
  beforeDestroy() {
    // this.eventBus.$destroy()
  },
  methods: {
    dateTimeFilter,
    modeFilter(val) {
      const mode = {
        1: 'Design',
        2: 'Simple'
      }
      return mode[val]
    },
    fileFilter(val) {
      const file = {
        1: 'JSON',
        2: 'ASN.1',
        3: 'XML'
      }
      return file[val]
    },
    terminalChange() {
      if (this.terminalRadio === 2 + '') {
        this.chooseTerminal = false
      } else {
        this.chooseTerminal = true
      }
    },
    transTag(type) {
      // eslint-disable-next-line no-empty
      console.log(type)
      switch (type) {
        case 'Downloaded':
          return 'success'
        case 'Updated':
          return 'warning'
        case 'Wait Publish':
          return 'info'
        case 'Wait Update':
          return 'danger'
        default:
          return ''
      }
    },
    handleTabClick(tab) {
      console.log(tab)
      if (tab.name === 'profile') {
        this.$refs.statisticsTab.resize()
        this.$refs.statisticsTab.getData()
      }
    },
    hasPermission
  }
}
</script>

<style lang="scss">
.flyparameter-app-info {
  .el-card__header {
    padding: 10px 20px;
  }
  .el-tabs__content {
    // padding: 10px;
  }
  .el-card__body {
    padding: 10px 0;
    /* padding: 20px 0; */
  }
}
</style>

<style lang="scss" scoped>
.flyparameter-app-info {
}
.info-item {
  padding: 10px 20px;
  &:not(:last-child) {
    border-bottom: 1px solid #ebebeb;
  }
}
</style>

<style scoped>

::v-deep .el-descriptions__header {
  margin-bottom: 5px;
}
.dialogTitle {
  font-size: 18px;
  margin-left: 35px;
  margin-bottom: 10px;
}
.profile-description {
  margin: 20px 0;
}
.row-bg {
  font-size: 13px;
}
</style>
